<template>
  <el-dialog title="选择位置" :before-close="closeHandle" :visible.sync="dialogVisible" width="70%">
    <div style="height: 150px;">
      <el-form ref="form" :model="form" append-to-body label-width="110px" :rules="rules">
        <el-col :span="12">
          <el-form-item label="所属地区" class="form-item">
            <el-input :disabled="true" v-model="form.province" size="small" placeholder="所属省份" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属城市" class="form-item">
            <el-input :disabled="true" v-model="form.city" size="small" placeholder="所属城市" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经度" prop="longitude" class="form-item">
            <el-input v-model="form.longitude" size="small" placeholder="经度" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度" prop="latitude" class="form-item">
            <el-input v-model="form.latitude" size="small" placeholder="纬度" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择位置" class="form-item">
            <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }"
              @change="handleChange"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址" class="form-item">
            <el-input :disabled="select" v-model="form.address" size="small" placeholder="详细地址" />
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <el-row class="mb8">
      <div class="amap-page-container">
        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"
          :center="center"></el-amap-search-box>
        <el-amap :vid="'amap-vue'" :zoom="zoom" :center="center" :events="events">
          <el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible"
            :draggable="marker.draggable"></el-amap-marker>
        </el-amap>
      </div>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="oncancel">取 消</el-button>
      <el-button type="primary" @click="submit('form')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    getTreeAll,
    getArea
  } from '@/api/space/space'
  export default {
    name: 'silk-map',
    props: ['dialogVisible'],
    data() {
      return {
        select: false,
        value: '',
        form: {
          province: '',
          city: '',
          longitude: '', // 经度 106.5192765
          latitude: '', //  纬度 29.6411108
          address: '',
        },
        q: '',
        zoom: 14,
        center: [106.5192765, 29.6411108],
        marker: {
          position: [106.5192765, 29.6411108],
          visible: true,
          draggable: false
        },
        searchOption: {
          city: '全国',
          citylimit: true
        },
        events: {
          click: (e) => {
            // console.log(e)
            this.marker.position = [e.lnglat.lng, e.lnglat.lat]
            this.form.longitude = e.lnglat.lng
            this.form.latitude = e.lnglat.lat
            this.onChange()
          }
        },
        options: [],
        rules: {
          longitude: [{
            required: true,
            message: '请在地图上标记地点以便确认经度',
            trigger: 'blur'
          }],
          latitude: [{
            required: true,
            message: '请在地图上标记地点以便确认纬度',
            trigger: 'blur'
          }]
        }
      }
    },
    inject: ["fatherSetPosition"],
    created() {
      this.getAddress()
    },
    methods: {
      handleChange(value) {
        // getArea(value[2]).then(res =>{
        //   console.log('area--->',res)
        // })
        this.form.latitude = ''
        this.form.longitude = ''
        this.form.cityId = value[0]
        let data = this.options
        data.map(item => {
          if (item.id == value[0]) {
            this.form.province = item.detailName
          }
          item.children.map(items => {
            if (items.id == value[1]) {
              this.form.city = items.detailName
            }
            if (items.children && items.children.length > 0) {
              items.children.map(items_ => {
                if (items_.id == value[2]) {
                  this.form.address = items_.detailName
                }
              })
            }
          })
        })
        this.form.cityId = value[2]
        this.searchOption.city = this.form.city
        console.log(this.form)
      },
      // 获取地区
      getAddress() {
        let that = this
        getTreeAll({
          detailName: ''
        }).then(res => {
          // console.log("address---->", res)
          if (res.data.length > 0) {
            this.options = res.data
            this.options.map(item => {
              this.$set(item, 'label', item.detailName)
              this.$set(item, 'value', item.id)
              this.$set(item, 'children', item.item)
              item.children.map(items => {

                this.$set(items, 'children', items.item)
                this.$set(items, 'label', items.detailName)
                this.$set(items, 'value', items.id)
                if (items.children && items.children.length > 0) {
                  items.children.map(items_ => {
                    this.$set(items_, 'label', items_.detailName)
                    this.$set(items_, 'value', items_.id)
                    this.$set(items_, 'children', items_.item)
                    if (items_.children && items_.children.length > 0) {
                      items_.children.map(items__ => {
                        this.$set(items__, 'label', items__.detailName)
                        this.$set(items__, 'value', items__.id)
                      })
                    }
                  })
                }
              })
            })
          }
        })
      },
      onSearchResult(pois) {
        // console.log(pois)
        let latSum = 0
        let lngSum = 0
        pois.forEach(poi => {
          lngSum += poi.lng
          latSum += poi.lat
        })
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.center = [center.lng, center.lat]
      },
      onChange() {
        let that = this
        AMap.plugin("AMap.Geocoder", () => {
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          geocoder.getAddress(that.marker.position, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              console.log(result, 'res')
              let regeocode = result.regeocode.addressComponent
              that.select = false,
                that.form = {
                  province: regeocode.province,
                  city: regeocode.city == '' ? regeocode.province : regeocode.city,
                  address: result.regeocode.formattedAddress,
                  longitude: that.marker.position[0],
                  latitude: that.marker.position[1],
                  // cityId: regeocode.towncode
                }
            }
          })
        })
      },
      submit(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            let data = this.options
            data.map(item => {
              if (item.detailName == this.form.province) {
                this.form.cityId = item.id
              }
            })
            this.fatherSetPosition(this.form)
            this.value = ''
            this.form = { // 重置
              province: '',
              city: '',
              longitude: '',
              latitude: '',
              address: '',
            }
          }
        })
      },
      oncancel() {
        this.fatherSetPosition(this.form)
        this.value = ''
        this.form = { // 重置
          province: '',
          city: '',
          longitude: '',
          latitude: '',
          address: '',
        }
      },
      // 弹窗关闭时
      closeHandle() {
        this.fatherSetPosition(this.form)
        this.value = ''
        this.form = { // 重置
          province: '',
          city: '',
          longitude: '',
          latitude: '',
          address: '',
        }
      },
      // 逆向地址编码
    }
  }
</script>
<style>
  .el-vue-search-box-container {
    /* opacity: 0; */
  }

  .el-vue-search-box-container .search-box-wrapper .search-btn {
    color: #fff !important;
    background: #3c9cff !important;
  }

  .el-cascader--medium {
    width: 100%;
  }
</style>
<style>
  .amap-page-container {
    width: 100%;
    height: 440px;
  }

  .search-box {
    margin-top: 0px;
    position: relative;
    top: 65px;
    left: 20px;
  }

  .dialog-footer {
    display: block;
    margin-top: 20px;
  }
</style>
